<template>
  <view class="container">
    <scroll-view 
      class="chat-container" 
      scroll-y 
      :scroll-top="scrollTop"
      @scrolltoupper="loadMoreMessages"
    >
      <view class="message-list">
        <view 
          v-for="(message, index) in messages" 
          :key="index"
          class="message-item"
          :class="{ 'message-mine': message.isMine }"
        >
          <view class="avatar"></view>
          <view class="message-content">
            <view class="bubble">{{ message.content }}</view>
            <view class="time">{{ message.time }}</view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <view class="input-area">
      <input 
        class="input" 
        type="text" 
        v-model="inputMessage"
        placeholder="请输入消息..."
        confirm-type="send"
        @confirm="sendMessage"
      />
      <button 
        class="btn primary send-btn" 
        :disabled="!inputMessage.trim()"
        @tap="sendMessage"
      >发送</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      chatId: '',
      chatName: '',
      inputMessage: '',
      scrollTop: 0,
      messages: [
        {
          id: 1,
          content: '你好，请问有什么可以帮你的吗？',
          time: '14:30',
          isMine: false
        },
        {
          id: 2,
          content: '我想咨询一个问题',
          time: '14:31',
          isMine: true
        },
        {
          id: 3,
          content: '好的，请说',
          time: '14:31',
          isMine: false
        }
      ]
    }
  },
  onLoad(options) {
    this.chatId = options.id
    this.chatName = options.name
    uni.setNavigationBarTitle({
      title: this.chatName
    })
    this.scrollToBottom()
  },
  methods: {
    scrollToBottom() {
      // 延迟执行以确保消息列表已渲染
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(this)
        query.select('.message-list').boundingClientRect(data => {
          this.scrollTop = data.height
        }).exec()
      }, 100)
    },
    loadMoreMessages() {
      // TODO: 实现加载更多历史消息
      uni.showLoading({
        title: '加载中...'
      })
      setTimeout(() => {
        uni.hideLoading()
      }, 1000)
    },
    sendMessage() {
      if (!this.inputMessage.trim()) return
      
      // 添加新消息
      this.messages.push({
        id: Date.now(),
        content: this.inputMessage,
        time: '刚刚',
        isMine: true
      })
      
      this.inputMessage = ''
      this.scrollToBottom()
      
      // TODO: 发送消息到服务器
    }
  }
}
</script>

<style lang="scss">
@import '@/common/styles/common.scss';

.chat-container {
  position: fixed;
  top: 0;
  bottom: 100rpx;
  left: 0;
  right: 0;
  background: #f5f5f5;
}

.message-list {
  padding: 24rpx;
  
  .message-item {
    display: flex;
    margin-bottom: 32rpx;
    
    &.message-mine {
      flex-direction: row-reverse;
      
      .message-content {
        margin: 0 24rpx 0 80rpx;
        align-items: flex-end;
        
        .bubble {
          background: $primary-color;
          color: #FFFFFF;
          
          &:after {
            left: auto;
            right: -16rpx;
            border-left-color: $primary-color;
            border-right-color: transparent;
          }
        }
      }
    }
    
    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      background: #eee;
    }
    
    .message-content {
      margin: 0 80rpx 0 24rpx;
      display: flex;
      flex-direction: column;
      
      .bubble {
        max-width: 480rpx;
        padding: 20rpx 24rpx;
        background: #FFFFFF;
        border-radius: 8rpx;
        font-size: 28rpx;
        position: relative;
        word-break: break-all;
        
        &:after {
          content: '';
          position: absolute;
          top: 24rpx;
          left: -16rpx;
          border: 8rpx solid transparent;
          border-right-color: #FFFFFF;
        }
      }
      
      .time {
        font-size: 24rpx;
        color: $text-color-secondary;
        margin-top: 8rpx;
      }
    }
  }
}

.input-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16rpx 24rpx;
  background: #FFFFFF;
  border-top: 2rpx solid $border-color;
  display: flex;
  align-items: center;
  
  .input {
    flex: 1;
    margin: 0;
    margin-right: 16rpx;
  }
  
  .send-btn {
    width: auto;
    margin: 0;
    padding: 0 32rpx;
  }
}
</style> 